<template>
  <div class="menu_config">
    <el-table 
    :data="menuCofigList" 
    v-loading = "loading"
    style="margin-top: 15px"
    border
    :row-key="getRowKey"
    :tree-props="{children: 'sub'}"
    default-expand-all
    >
      <el-table-column
        prop="title"
        label="标题"
        min-width="136px"
      >
      </el-table-column>
      <el-table-column
        prop="id"
        label="id"
        min-width="100px"
        align="center"
      ></el-table-column>      
      <el-table-column
        prop="href"
        label="路径"
        min-width="200px"
      >
      </el-table-column> 
      <el-table-column prop="status" label="菜单状态" align="center" min-width="120px">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#5FB878"
            inactive-color="#ccc"
            :active-value= "1"
            :inactive-value="0"
            :active-text="scope.row.status == 1?'启用':'　禁用'"
            :width="45"
            @change="changeStatus($event,scope.row.id)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作" align="center" min-width="245px">
				<template slot-scope="scope">
					<el-button
						size="mini"
            type="primary"
            @click="handleAddMenu(scope.row)"
					>添加下级</el-button>
					<el-button
						size="mini"
						type="success"
            @click="handleEdit(scope.$index, scope.row)"
						>编辑</el-button>
					<el-button
						size="mini"
						type="danger"
            @click="handleDelete(scope.row)"
						>删除</el-button>
				</template>
			</el-table-column>
    </el-table>
    <el-dialog
			:title="editData.id?'编辑':'添加'"
			:visible.sync="dialogVisible"
			class="modifyDialog"
      width="500px">
			<el-form v-loading="isLoadEditData" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="id" prop="id">
					<el-input v-model="editData.id"></el-input>
				</el-form-item>
        <el-form-item label="上级id" prop="pid" v-if="editData.id" >
					<el-input v-model="editData.pid"></el-input>
				</el-form-item>
				<el-form-item label="标题" prop="title">
					<el-input v-model="editData.title"></el-input>
				</el-form-item>				
				<el-form-item label="图标" prop="icon">
					<i :class="editData.icon" style="font-size:18px"></i>
					<el-button >选择图标</el-button>
				</el-form-item>
				<el-form-item label="后端路由地址" prop="href">
					<el-input v-model="editData.href"></el-input>
				</el-form-item>
        <el-form-item label="可选参数" prop="params">
					<el-input v-model="editData.params"></el-input>
				</el-form-item>
        <el-form-item label="排序" prop="sort">
					<el-input v-model="editData.sort"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
				<el-button type="primary" @click="editSave">确 定</el-button>
			</span>
		</el-dialog>
  </div>
</template>
<script>
import axios from 'axios'
import store from '../../vuex/store'
export default {
  name: 'menu_config',
  data () {
    return {
      menuCofigList: [],
      loading: false,
      isLoadEditData: false,
      dialogVisible: false,
      editData: {
        id: null,
        pid: null,
        title: '',
        icon : '',
        href: '',
        params: '',
        sort: null
      }
    }
  },
  methods: {
    checkParams(obj){
      for(let i in obj){
        if(!obj[i]){
          delete obj[i]
        }
      }
    },

    /**
     * 获取菜单列表
     */
    getMenuList () {
      this.menuCofigList = [];
      this.loading = true;
      let obj = {}
      this.$http.post('/menu/index').then( res => {
        if(res.status === 200){
          this.loading = false;
          // if(res.data.msg === 'token过期'){
          //   this.$store.commit('TOKEN', '');
          //   this.$router.push('/login')
          // }
          obj = res.data.result;
          for(let i in obj){
            this.menuCofigList.push(obj[i])
          } 
          // this.$store.dispatch('setMenuList', []);
          // this.$store.dispatch('setMenuList', this.menuCofigList);     
        }        
      })
    },

    /**
     * 获取id
     * 保存选中的数据id,row-key就是要指定一个key标识这一行的数据
     */
    getRowKey(row){
      // console.log(row)
      return row.id
    },

    /**
     * 添加菜单
     */
    handleAddMenu(row){
      this.editData.id = null;
      this.editData.pid = row.pid;
      this.editData.title = '';
      this.editData.icon = '';
      this.editData.href = '';
      this.editData.params = '';
      this.editData.sort = null;
      this.dialogVisible = true;
    },

    /**
     * 修改菜单
     */
    handleEdit (key, data) {
      this.dialogVisible = true
			this.isLoadEditData = true;
			this.editData = JSON.parse(JSON.stringify(data))
			this.isLoadEditData = false;
    },

    /**
     * 添加和编辑菜单
     *
     */
    editSave(){
      let actionUrl = this.editData.id ? '/menu/edit' : '/menu/add';
      let {pid, title, icon, href, params,  sort} = {...this.editData};
      let addData = this.editData.id ?  this.editData : {pid, title, icon, href, params, sort};
      for(let i in addData) {
        if(addData[i] === '' || addData[i] === null){
          delete addData[i]         
        }
      }
			this.$http.post(actionUrl, addData).then(res=>{
        	if (res.status === 200) {
            this.getMenuList();
            this.dialogVisible = false;
        	}
      });
    },

    /**
     * 删除菜单
     */
    handleDelete (row) {      
      this.$confirm('此操作将删除id='+row.id+'这条菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post("/menu/del", {
          id: row.id
        }).then( res => {
          this.getMenuList();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '已取消删除'
        });          
      });      
    },
    /**
    *启用或禁用菜单
    */
    changeStatus(status,num){
      this.$http.post('/menu/status', {
        id: num,
        status: status
      }).then( res => {
        this.$message({
            message: res.data.result.msg,
            center: true,
            type: 'success',
            offset:400,
            duration:1000
        });
      })
    },
  },
  mounted () {
    this.getMenuList()
    // console.log(this.menuCofigList)
    
  }
}
</script>
<style lang="less" scoped>
  
</style>